<template>
  <div class="yoyo-container mx-auto min-h-screen">
    <!-- 导航栏 -->
    <navBar :title="$t('binds.title')"></navBar>

    <!-- 标签页 -->
    <van-tabs v-model="activeTab" class="bind-tabs yoyo-container " sticky offset-top="3rem">
      <van-tab :title="$t('binds.simCard')" name="sim">
        <BindingCard :cards="simCards" type="sim" @query="handleQuery" @recharge="handleRecharge" />

        <div class="px-4 py-3 text-[13px] text-gray-700">{{ $t("binds.note") }}</div>
      </van-tab>

      <van-tab :title="$t('binds.esim')" name="esim">
        <BindingCard :cards="esimCards" type="esim" @query="handleQuery" @recharge="handleRecharge" />
      </van-tab>
    </van-tabs>

    <!-- 底部按钮 -->
    <van-button type="primary" round class="mx-16 w-[calc(100%-8rem)] my-4 bg-orange-500 border-none" @click="handleNewBinding">
      {{ $t("binds.newBinding") }}
    </van-button>

    <!-- 删除确认弹窗 -->
    <van-dialog
      v-model="showDeleteDialog"
      :title="$t('binds.confirmDelete')"
      show-cancel-button
      :confirm-button-text="$t('common.confirm')"
      :cancel-button-text="$t('common.cancel')"
      @confirm="confirmDelete" />
  </div>
</template>

<script>
import { Tabs, Tab, Button, Dialog } from "vant"
import BindingCard from "@/components/mine/BindingCard.vue"

export default {
  name: "MyBinds",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    BindingCard,
  },
  data() {
    return {
      activeTab: "sim",
      showDeleteDialog: false,
      // 模拟SIM卡数据
      simCards: [
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "中国大陆 + 香港",
          package: "20GB 30天",
          status: "activated",
          validPeriod: "2025-07-31 - 2025-08-29",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "中国大陆 + 香港",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "马来西亚",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "马来西亚",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "中国大陆 + 香港",
          package: "20GB 30天",
          status: "activated",
          validPeriod: "2025-07-31 - 2025-08-29",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "中国大陆 + 香港",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "马来西亚",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "马来西亚",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "中国大陆 + 香港",
          package: "20GB 30天",
          status: "activated",
          validPeriod: "2025-07-31 - 2025-08-29",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "中国大陆 + 香港",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "马来西亚",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        },
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "马来西亚",
          package: "10GB 30天",
          status: "notActivated",
          validPeriod: "",
        }
      ],
      // 模拟eSIM数据
      esimCards: [
        {
          iccid: "xxxxxxxxxxxxxxxxxxxx",
          region: "日本",
          package: "15GB 7天",
          status: "activated",
          validPeriod: "2025-07-20 - 2025-07-27",
        },
      ],
    }
  },
  methods: {
    handleQuery(card) {
      // 跳转到查询页面
      this.$router.push({ path: "/query", query: { iccid: card.iccid } })
    },
    handleRecharge(card) {
      // 跳转到充值页面
      this.$toast("跳转到充值页面")
    },
    handleDeleteBinding() {
      this.showDeleteDialog = true
    },
    handleNewBinding() {
      // 跳转到新增绑定页面
      this.$toast("跳转到新增绑定页面")
    },
    confirmDelete() {
      // 执行删除操作
      this.$toast.success(this.$t("binds.deleteSuccess"))
    },
    goBack() {
      this.$router.go(-1)
    },
  },
}
</script>

<style scoped>
/deep/ .van-sticky {
  width: 100%;
  /* background-color: #f7fafc; */
}
/deep/.van-tabs__nav {
  /* background-color: transparent; */
}
@media (width >= 40rem) {
  :deep(.van-sticky) {
    max-width: 40rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}

@media (width >= 48rem) {
  :deep(.van-sticky) {
    max-width: 48rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}

@media (width >= 64rem) {
  :deep(.van-sticky) {
    max-width: 64rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
@media (width >= 80rem) {
  :deep(.van-sticky) {
    max-width: 64rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
@media (width >= 96rem) {
  :deep(.van-sticky) {
    max-width: 72rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
</style>
